<template>
  <basic-dialog
    width="40%"
    :title="'批量下架'"
    :visible="visible"
    :showClose="false"
    :handleOpen="handleOpen"
  >
    <el-form
      ref="formData"
      class="action_dialog_body"
      :model="formData"
      label-width="110px"
    >
      <el-form-item
        label="下架原因:"
        prop="stopReason"
        :rules="[{
          required: true,
          message: '请选择下架原因',
          trigger: 'change'
        }]"
      >
        <el-select
          style="width: 100%"
          v-model="formData.stopReason"
          placeholder="请选择"
        >
          <el-option
            v-for="item in stopReasonOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="formData.stopReason == '其它'"
        label="下架原因详情:"
        prop="stopReasonDesc"
        :rules="[{
          required: formData.stopReason == '其它',
          message: '请输入下架原因详情',
          trigger: 'change'
        }]"
      >
        <el-input
          v-model="formData.stopReasonDesc"
          type="textarea"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <el-row slot="ft" type="flex" justify="end">
      <el-button @click="handleClose">取消</el-button>
      <el-tooltip
        class="item"
        effect="dark"
        content="商品下架后，销售端将不会被搜索及展示"
        placement="top-start"
      >
        <el-button
          type="primary"
          :loading="okLoading"
          @click="handleOk"
        >下架</el-button>
      </el-tooltip>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';

export default {
  components: {
    BasicDialog,
  },
  props: {
    visible: Boolean,
    okLoading: {
      type: Boolean,
      default: false
    },
    handleSubmit: {
      type: Function,
      default: () => {}
    },
  },
  data () {
    return {
      formData: {
        stopReason: '',
        stopReasonDesc: '',
      },
      stopReasonOptions: [
        {
          label: '已有正常/潜在',
          value: '已有正常/潜在',
        },
        {
          label: '非我司经营范围',
          value: '非我司经营范围',
        },
        {
          label: '属定制类商品，依据项目订货',
          value: '属定制类商品，依据项目订货',
        },
        {
          label: '其它',
          value: '其它',
        },
      ]
    }
  },
  methods: {
    handleOpen () {
      this.formData = {
        stopReason: '',
        stopReasonDesc: ''
      }
    },
    handleOk () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          const { stopReason, stopReasonDesc } = this.formData;
          if (stopReason !== '其它') {
            this.handleSubmit({ stopReason });
          } else {
            this.handleSubmit({ stopReason: stopReasonDesc });
          }
        } else {
          this.$message.warning('必填项不能为空');
        }
      })
    },
    handleClose () {
      this.$emit('update:visible', false);
    }
  }
}
</script>
